// 公共sass语法  变量 函数 继承类 混合代码块
// @import "./common/variables.scss";
// @import "./common/functions.scss";
// @import "./common/extends.scss";
// @import "./common/mixins.scss";

// // 公共 reset.scss 
// @import "./common/reset.scss";

// 问题: 
// sass文件作为公共文件引入时 可以实现整个sass文件复用=>被引入的sass文件还是会被解析为css ;

// 解决方法: 如果sass文件只做引入使用  并不想被解析为css文件  => 可以在文件名前加前缀 "_"

@import "./common/_variables.scss";
@import "./common/_functions.scss";
@import "./common/_extends.scss";
@import "./common/_mixins.scss";

// 公共 reset.scss_ 
@import "./common/_reset.scss";

// 嵌套语法

// sass中允许使用嵌套语法, sass解析css时,会默认将父选择器拼接到子选择器前面,用空格分隔 => 变为包含选择器(子代选择器)
.header {
    width: $typeArea;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    background-color: $grey;

    .header-nav {
        float: left;

        // .header .header-nav > li
        &>li {
            float: left;
            position: relative;

            // 父选择器修饰符  当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // &  被 .header .header-nav li 替换
            &:hover {
                // .header .header-nav li:hover
                background-color: #6ff;
                color: #6f6f6f;

                .subNav {
                    display: block;
                }
            }

            a {
                padding: 0 20px;
            }

            .subNav {
                width: 200px - 20px;
                padding-left: 20px;
                position: absolute;
                left: 0;
                top: 40px;
                background-color: #6ff;
                display: none;
            }
        }
    }

    .header-search {
        float: right;

        .searchCon {
            float: left;
        }

        .searchBtn {
            float: right;
        }

    }
}